<template>
	<view>
		<!-- <Head :goback_custom="true" @gobackCustomMethod="$emit('closePopout')">建议反馈</Head> -->
		<view class="form_top_border"></view>
		<view class="feed_container">
			<view class="feed_title">意见类型</view>
			<view class="feed_type">
				<view class="type_item" :class="item.id == type ? 'selected' : ''" v-for="(item, index) in options_feedback" :key="index" @click="handlerType(item)">
					{{ item.text }}
				</view>
				<view class="clear"></view>
			</view>
			<view class="feed_title">反馈内容(必填)</view>
			<textarea 
			maxlength="-1" 
			:value="content"
			class="feed_area" 
			rows="8" 
			placeholder="请具体描述您要反馈的内容，以便我们及时处理，感谢您的支持。"
			@input="handleInput"
			>
			</textarea>
			<view style="margin: 32rpx 32rpx 0;">
				<u-button shape="circle" type="primary" @click="handleSubmit">提交</u-button>
			</view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import http from '@/utils/http'
	import api from '@/api'
	export default {
		name: 'Feedback',
		data() {
			return {
				type: 0,
				content: '',
				content2: ''
			}
		},
		created() {
			this.initCB()
		},
		computed: {
			options_feedback() {
				return this.$store.state.classifyFeedback
			}
		},
		methods: {
			handleInput(e){
				this.content2 = e.detail.value
			},
			initCB() {
				this.content = ''
				this.$store.dispatch('getClassify', 'feedback').then(res => {
					this.type = res.data[0].id
				})
			},
			handlerType(item) {
				this.type = item.id
			},
			// 提交
			handleSubmit() {
				this.content = this.content2
				if (this.type == 0) {
					this.$refs.uTips.show({
						title: '请选择反馈类型'
					})
					return false
				}
				if (this.content == '') {
					this.$refs.uTips.show({
						title: '请填写反馈内容'
					})
					return false
				}
				if (this.content.length > 200) {
					this.$refs.uTips.show({
						title: '最多填写200个字'
					})
					return false
				}
				http
					.post(api.feedback, {
						type: this.type,
						content: this.content
					})
					.then(res => {
						this.$refs.uTips.show({
							title: res.data.message,
							type: 'success',
						})
						setTimeout(()=>{
							this.$emit('closePopout')
							setTimeout(()=>{
								this.content = ''
								this.content2 = ''
							},3000)
						},2000)
					})
					.catch(() => {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.feed_container {
		.feed_area {
			&::placeholder {
				color: #c9c9c9;
			}
			box-sizing: border-box;
			width: 100%;
			border: 2rpx solid #e2e2e2;
			resize: none;
			padding: 16rpx 24rpx;
			font-size: 28rpx;
			line-height: 1.6;
		}

		.feed_type {
			.type_item {
				&.selected {
					background-color: #f4f9ff;
					border: 2rpx solid #f4f9ff;
					color: #1787fb;
				}
				
				float: left;
				margin-right: 20rpx;
				padding: 10rpx 24rpx;
				font-size: 22rpx;
				color: #666666;
				background-color: #ffffff;
				border: 2rpx solid #e2e2e2;
			}
		}

		.feed_title {
			padding: 34rpx 0;
			font-size: 32rpx;
			color: #333333;
			font-weight: bold;
		}

		padding: 0 32rpx;
	}
</style>
